<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                margin: 0 auto;
                width: 500px;
                height: 500px;
                text-align: center;
            }
            .item{
                width: 100px;
                height: 100px;
                border: 1px solid black;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h2 class="header">点击切换颜色</h2>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <script>
            let items = document.querySelectorAll(".item");
            for(let i=0 ; i < items.length ; i++){
                items[i].onclick = function(){
                    // this.style.background = "skyblue";
                    items[i].style.background = "skyblue";
                };
            };

            {
                let i = 0;
                items[i].onclick = function () {
                        // this.style.background = "skyblue";
                        items[i].style.background = "skyblue";
                        };
            }
            {
                    let i = 1;
                    items[i].onclick = function () {
                        // this.style.background = "skyblue";
                        items[i].style.background = "skyblue";
                    };
                }
            {
                        let i = 2;
                        items[i].onclick = function () {
                            // this.style.background = "skyblue";
                            items[i].style.background = "skyblue";
                        };
            }
        </script>
    </body>
</html>